// pages/RoutingLibrariesPage.js
import React, { useState, useEffect } from 'react';
import {
  Box,
  Typography,
  List,
  ListItem,
  Stack,
} from '@mui/material';
import RoutingIcon from '@mui/icons-material/AltRouteOutlined';
import PublicOutlinedIcon from '@mui/icons-material/PublicOutlined';
import PublicOffOutlinedIcon from '@mui/icons-material/PublicOffOutlined';
import { TypeSection } from 'components/elements/TypeSections';
import { 
  HeroSection,
} from 'text/TemplateHeroText';
import { CheckGetEndpoint } from 'api/status';

const RoutingLibrariesPage = () => {
  const [routeStatuses, setRouteStatuses] = useState({});

  useEffect(() => {
    const checkAllRoutes = async () => {
      // API and Frontend routes
      const loginPageStatus = await CheckGetEndpoint('/auth/login');
      setRouteStatuses(prev => ({ ...prev, '/auth/login': loginPageStatus.status }));
      
      const forgotPasswordStatus = await CheckGetEndpoint('/auth/forgot-password');
      setRouteStatuses(prev => ({ ...prev, '/auth/forgot-password': forgotPasswordStatus.status }));
      
      const resendActivationStatus = await CheckGetEndpoint('/auth/resend-activation');
      setRouteStatuses(prev => ({ ...prev, '/auth/resend-activation': resendActivationStatus.status }));
      
      const resetPasswordStatus = await CheckGetEndpoint('/auth/reset-password/:email');
      setRouteStatuses(prev => ({ ...prev, '/auth/reset-password/:email': resetPasswordStatus.status }));
      
      const activateAccountStatus = await CheckGetEndpoint('/auth/activate/:email');
      setRouteStatuses(prev => ({ ...prev, '/auth/activate/:email': activateAccountStatus.status }));
      
      const registerStatus = await CheckGetEndpoint('/auth/register');
      setRouteStatuses(prev => ({ ...prev, '/auth/register': registerStatus.status }));
      
      // Private Routes
      const dashboardStatus = await CheckGetEndpoint('/dashboard');
      setRouteStatuses(prev => ({ ...prev, '/dashboard': dashboardStatus.status }));
      
      const teamsStatus = await CheckGetEndpoint('/teams');
      setRouteStatuses(prev => ({ ...prev, '/teams': teamsStatus.status }));
      
      const teamIdStatus = await CheckGetEndpoint('/teams/:teamId');
      setRouteStatuses(prev => ({ ...prev, '/teams/:teamId': teamIdStatus.status }));
      
      const userTeamsStatus = await CheckGetEndpoint('/user-teams');
      setRouteStatuses(prev => ({ ...prev, '/user-teams': userTeamsStatus.status }));
      
      const cardAddStatus = await CheckGetEndpoint('/card/add');
      setRouteStatuses(prev => ({ ...prev, '/card/add': cardAddStatus.status }));
      
      const planStatus = await CheckGetEndpoint('/plan');
      setRouteStatuses(prev => ({ ...prev, '/plan': planStatus.status }));
      
      const editUserStatus = await CheckGetEndpoint('/user/edit');
      setRouteStatuses(prev => ({ ...prev, '/user/edit': editUserStatus.status }));
      
      const editAccountStatus = await CheckGetEndpoint('/account/edit');
      setRouteStatuses(prev => ({ ...prev, '/account/edit': editAccountStatus.status }));
      
      const indexUsersStatus = await CheckGetEndpoint('/users');
      setRouteStatuses(prev => ({ ...prev, '/users': indexUsersStatus.status }));
      
      const createUserStatus = await CheckGetEndpoint('/create-user');
      setRouteStatuses(prev => ({ ...prev, '/create-user': createUserStatus.status }));
      
      const editUserIdStatus = await CheckGetEndpoint('/edit-user/:userId');
      setRouteStatuses(prev => ({ ...prev, '/edit-user/:userId': editUserIdStatus.status }));
      
      const userIdStatus = await CheckGetEndpoint('/user/:userId');
      setRouteStatuses(prev => ({ ...prev, '/user/:userId': userIdStatus.status }));
    };

    checkAllRoutes();
  }, []);

  const getStatusIcon = (path) => {
    return routeStatuses[path] === 'online' ? 
      <PublicOutlinedIcon color="primary" fontSize="small" /> : 
      <PublicOffOutlinedIcon color="disabled" fontSize="small" />;
  };

  return (
    <Box
      sx={{
        width: '100%',
        maxWidth: '1200px',
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 4,
      }}
    >
      <TypeSection
        paddingY={10}
        paddingX={1}
        text={<HeroSection 
          text="Route protection and path management"    
          icon={RoutingIcon}
        />}
      />  

      <TypeSection
        paddingY={10}
        paddingX={1}
        text={
          <List>
            <ListItem>
              <Typography
                variant="subtitle1"
                sx={{ fontWeight: 600 }}
              >
                API and Frontend
              </Typography>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/auth/login (LoginPage)</Typography>
                {getStatusIcon('/auth/login')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/auth/forgot-password (ForgotPasswordPage)</Typography>
                {getStatusIcon('/auth/forgot-password')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/auth/resend-activation (ResendActivationPage)</Typography>
                {getStatusIcon('/auth/resend-activation')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/auth/reset-password/:email (ResetPasswordPage)</Typography>
                {getStatusIcon('/auth/reset-password/:email')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/auth/activate/:email (ActivateAccountPage)</Typography>
                {getStatusIcon('/auth/activate/:email')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/auth/register (RegisterPage)</Typography>
                {getStatusIcon('/auth/register')}
              </Stack>
            </ListItem>
            <ListItem sx={{ pt: 3 }}>
              <Typography
                variant="subtitle1"
                sx={{ color: '#fff', fontWeight: 600 }}
              >
                Private Routes
              </Typography>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/dashboard (DashboardSwitcher)</Typography>
                {getStatusIcon('/dashboard')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/teams (IndexTeamsPage)</Typography>
                {getStatusIcon('/teams')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/teams/:teamId (TeamPage)</Typography>
                {getStatusIcon('/teams/:teamId')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/user-teams (UserTeams)</Typography>
                {getStatusIcon('/user-teams')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/card/add (CardAddPage)</Typography>
                {getStatusIcon('/card/add')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/plan (PlanPage)</Typography>
                {getStatusIcon('/plan')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/user/edit (EditUserPage)</Typography>
                {getStatusIcon('/user/edit')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/account/edit (EditAccountPage)</Typography>
                {getStatusIcon('/account/edit')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/users (IndexUsersPage)</Typography>
                {getStatusIcon('/users')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/create-user (CreateUsersPage)</Typography>
                {getStatusIcon('/create-user')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/edit-user/:userId (EditUsersPage)</Typography>
                {getStatusIcon('/edit-user/:userId')}
              </Stack>
            </ListItem>
            <ListItem>
              <Stack direction="row" spacing={1} alignItems="center">
                <Typography color="text.primary">/user/:userId (EditUser)</Typography>
                {getStatusIcon('/user/:userId')}
              </Stack>
            </ListItem>
          </List>
        }
      />
    </Box>
  );
};

export default RoutingLibrariesPage;